<template>
   <div class="container">
      <el-row  type="flex" justify="center" class="row-box">
        <div class="login-box">
            <el-row  type="flex">
                <div class="title" :class="{'able-title':showlogin,'disabled-title':!showlogin}" @click="showlogin = true">登录</div>
                <div class="title" :class="{'able-title':!showlogin,'disabled-title':showlogin}" @click="showlogin = false">注册</div>
            </el-row>
            <el-row v-if="showlogin">
                <LoginForm/>
            </el-row>  
            <el-row v-if="!showlogin">
                <RegisterForm/>
            </el-row> 
        </div>
      </el-row>
   </div>
</template>

<script>
import LoginForm from '@@/components/user/LoginForm'
import RegisterForm from '@@/components/user/RegisterForm'
export default {
    data(){
        return{
            showlogin:true,
        }
    },
    components:{
        LoginForm,
        RegisterForm
    }
}
</script>

<style lang="less" scoped>
.container{
    width:100%;
    height: 600px;
    background: url('/images/th03.jfif') center center no-repeat;
    background-size: 100% 100%;
}
.row-box{
    width:100%;
    height: 100%;
}
.el-row--flex.is-justify-center {
    align-items: center;
}
.login-box{
    width: 400px;
    //height: 284px;
    background-color: #fff;
}
.title{
    flex:1;
    height: 50px;
    line-height: 50px;
    text-align: center;
    font-size: 15px;
    cursor:pointer;
}
.able-title{
    box-sizing: border-box;
    color: #FFA000;
    background-color: #fff;
    border-top: 2px solid #FFA000;
    font-weight: 700;
}
.disabled-title{
    color: #666666;
    background-color: #EEEEEE;
}
</style>